import React from 'react';
import Counter from './components/counter';
import TodoList from './components/todo-list';
import Vif from './components/v-if';
import Vshow from './components/v-show';
import Vfor from './components/v-for';
import Computed from './components/computed';
import Watch from './components/watch';
import LifeCycle from './components/life-cycle';
import Ref from './components/ref';
import Komponent from './components/component';
import Child from './components/child';
import Directive from './components/directive';
import MyInput from './components/my-input';
import Switch from './components/switch';

class App extends React.Component {

  state = {
    value: 'hello',
  }

  componentDidMount () {
    setTimeout(() => {
      this.setState({
        value: 'hi',
      });
    }, 1000);
  }

  // 渲染
  render () {
    // jsx语法
    return (
      <div>
        {/* <Counter /> */}
        {/* <TodoList /> */}
        {/* <Vif /> */}
        {/* <Vshow /> */}
        {/* <Vfor /> */}
        {/* <Watch /> */}
        {/* <Computed /> */}
        {/* <LifeCycle /> */}
        {/* <Ref /> */}
        {/* <Komponent /> */}
        {/* <Child
          msg={ 'hello' }
          sayHello={ () => console.log('hello') }
          suffix={ <i>?</i> }
        >
          <i>world</i>
        </Child> */}
        {/* <Directive /> */}

        {/* <MyInput
          prefix={ <i>前缀</i> }
          suffix={ <i>后缀</i> }
          defaultValue={ this.state.value }
          // value={ this.state.value }
          onChange={ (v) => this.setState({ value: v }) }
        /> */}

        <Switch
          defaultChecked
          onChange={ (checked) => {
            console.log(checked);
          } }
        />
{/*
        <Slider
          defaultValue={ 30 }
          min={ 0 }
          max={ 100 }
          disabled={ false }
          onChange={ (v) => console.log(v) }
        />

        <Slider2
          defaultValue={ [20, 30] }
          min={ 0 }
          max={ 100 }
          disabled={ false }
          onChange={ (v) => console.log(v) }
        /> */}

      </div>
    );
  }

}

export default App;
